import React, { ReactNode } from 'react'
import { View, Modal, Text, StyleSheet, TouchableNativeFeedback, Alert } from 'react-native'
import PortalHost from '../portal/portal_host'

interface Props{
  visiable?: boolean;
  maskCloseable?: boolean;
  popup?: boolean; // 是否是弹出窗，在底部弹出
  _close: (data: string | any) => void; // 关闭弹窗
}
interface State{
  viewVisible: boolean;
}

class ModelView extends React.Component<Props, State> {
  public static defaultProps = {
    visiable: false,
    maskCloseable: true,
    popup: false
  }

  public constructor (props: Props) {
    super(props)
    this.state = {
      viewVisible: this.props.visiable || false
    }
  }

  public componentDidUpdate (preProp: Props, preState: State): void {
    if (preState.viewVisible !== this.state.viewVisible && !this.state.viewVisible && this.props._close) {
      this.onClose(false)
    }
  }

  // 遮罩层点击
  public onMaskPress (): void {
    // Alert.alert('123')
    this.props.maskCloseable && this.onClose(false)
  }

  public onClose (data: string | any): void {
    // this.setState({
    //   viewVisible: false
    // })
    this.props._close(data)
  }

  public render (): ReactNode {
    const fillBlockRender = (
      <TouchableNativeFeedback onPress={(): void => { this.onMaskPress() }}>
        <View style={styles.fillBlock} />
      </TouchableNativeFeedback>
    )
    return (
      <Modal visible={this.state.viewVisible} transparent>
        <View style={[styles.modal, this.props.popup && styles.popup_outer]}>
          {fillBlockRender}
          <View style={[styles.modal_container, this.props.popup && styles.popup]}>
            {this.props.children}
          </View>
        </View>
      </Modal>
    )
  }
}
interface OpenResult {
  close: (data: any) => void;
  afterClose: (fn: (data: any) => void) => void;
}
export default class LinModal extends React.Component<Props> {
  public static open: (child: React.Component | React.ReactNode | string | any, childProps: any, option?: any) => OpenResult

  public componentWillMount (): void {
    const children = this.props.children
    open(
      function (props: any): ReactNode { return <View>{children}</View> },
      null,
      this.props
    )
  }

  public render (): ReactNode {
    return <View />
  }
}

const open = LinModal.open = (child: React.Component | React.ReactNode | string | any, childProps: any, option?: any): OpenResult => {
  if (typeof child === 'string') {
    child = (<Text>{child}</Text>)
  }
  let key = -1
  let afterCloseFn: (data: any) => void = (): void => {}
  const result: OpenResult = {
    close: (data: any): void => {
      PortalHost.remove(key, data)
      Alert.alert('close')
      afterCloseFn(data)
    },
    afterClose: (fn: any): void => {
      afterCloseFn = fn
    }
  }
  key = PortalHost.add(
    React.createElement(
      ModelView,
      { visiable: true, _close: result.close, ...option },
      React.createElement(child, { _close: result.close, ...childProps })
    )
  )
  return result
}

const styles = StyleSheet.create({
  modal: {
    flex: 1, alignItems: 'center', justifyContent: 'center'
  },
  fillBlock: {
    flex: 1,
    backgroundColor: '#000',
    opacity: 0.3,
    position: 'absolute',
    width: '100%',
    height: '100%'
  },
  modal_container: {
    backgroundColor: '#fff',
    width: '80%',
    elevation: 8,
    overflow: 'hidden',
    padding: 10
  },
  popup_outer: {
    justifyContent: 'flex-end'
  },
  popup: {
    width: '100%'
  }
})
